import React, { memo, useMemo } from 'react';
import { IChatDialogueMessageSchema } from '@/types/chat';
import IconUser from '@/components/Icons/IconUser';
import IconBot from '@/components/Icons/IconBot';
import IconVoice from '@/components/Icons/IconBot';
import IconCopy from '@/components/Icons/IconBot';
import classNames from 'classnames';
import MarkdownRenderer from '@/components/MarkdownRenderer';

const ChatContent: React.FC<{
  content: IChatDialogueMessageSchema;
  onLinkClick?: () => void;
}> = ({ content }) => {
  const { role, context, time_stamp } = content;
  const isRobot = useMemo(() => role === 'ai', [role]);
  return (
    <div className="flex flex-col flex-1 gap-3 mt-6">
      {/* icons */}
      <div className={classNames('flex items-center ', isRobot ? '' : 'flex-row-reverse')}>
        {isRobot ? (
          <IconBot className="border rounded-md flex flex-col w-8 h-8 shadow-lg " />
        ) : (
          <IconUser className="border rounded-md flex flex-col w-8 h-8 shadow-lg " />
        )}

        {isRobot ? (
          <div className="h-6 w-24 border border-gray-300 rounded-md mx-2 px-1 flex items-center">
            <IconVoice className="h-5 w-5 border-r border-r-gray-300" />
            <IconCopy className="h-5 w-5 border-r border-r-gray-300" />
          </div>
        ) : (
          <></>
        )}
        <div className="text-gray-400 text-xs mr-2">{time_stamp}</div>
      </div>
      <div>
        {/* 用户提问&AI回答 */}
        <div className={classNames('flex ', isRobot ? '' : 'flex-row-reverse')}>
          <div className={classNames('min-w-0 max-w-[90%] px-5 py-4 rounded-lg bg-gray-100')}>
            {isRobot ? <MarkdownRenderer content={context} /> : context}
          </div>
        </div>
      </div>
    </div>
  );
};

export default memo(ChatContent);
